<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=yes,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../../common/style/aui.css" />
    <link rel='stylesheet prefetch' href="../../common/style/photoswipe.css">
    <link rel='stylesheet prefetch' href="../../common/style/default-skin.css">
    <link rel="stylesheet" type="text/css" href="../../common/style/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../../common/style/house.css" />
    <link rel="stylesheet" type="text/css" href="../../common/style/company.css" />
    <script src="../../common/lib/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="../../common/js/md5.js"></script>
    <script src="../../common/js/vue.min.js"></script>
    <script src="../../common/js/axios.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script type="text/javascript" charset="utf-8" src="../../common/js/weixin.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="../../common/js/share.js"></script>
    <script
      type="text/javascript"
      src="../../common/request/request.js?version=1.0.12"
    ></script>
    <script type="text/javascript" src="./js/agency.js?version=1.0.12"></script>
    <script type="text/javascript" src="../../common/js/aui-dialog.js"></script>
    <style>
        .pingjia .mui-comments:last-child .mui-content {
            margin-bottom: 0;
        }
        .aui-dialog-body{
            font-size:0.95em;
            color: #333;
        }
        .aui-dialog-btn{
            font-size: 0.95em;
        }
        .loadMore{
            text-align: center;
            margin: .4rem;
        }
        .loadMore .aui-btn{
            font-size: 0.6rem;
            background-color: #38B3FF;
        }
    </style>
</head>

<body class="layout-w zichan">
    <div class="aui-content-padded" id="view">
        <div class="top-search aui-clearfix">
            <div class="aui-pull-left">
                <img src="../../common/images/logo-2.svg" @click="goHome">
            </div>
            <div class="aui-pull-right more-info" >
                <a href="javascript:;" style="padding-left:.5rem;" onClick="showMenus()">
                    <img src="../../common/images/more.svg" style="vertical-align: middle;width:.9rem;">
                </a>
                <ul style="display: none;">
                    <li><a href="/home/html/">首页</a></li>
                    <li><a href="../search/search-result-house.html">搜索选址</a></li>
                    <li><a href="../commiss/demand-entry.html">委托找房</a></li>
                    <li><a href="../others/enterDevelopers.html">入驻平台</a></li>
                </ul>
            </div>
            <div class="aui-pull-right" style="width:50%;">
                <!-- <form> -->
                    <div class="header-cearch" >
                        <i class="fa fa-search" @click="goToEntry"></i>
                        <input class="header-search-input" type="text" v-model="keyword" placeholder="搜索你想找的房源"  @focus="goToEntry">
                    </div>
                <!-- </form> -->
            </div>
        </div>
        <div class="main-info main-info-shadow aui-clearfix" style="padding:.4rem;">
            <div class="aui-list aui-media-list agent">
                <div class="aui-list-item aui-list-item-middle">
                    <div class="aui-media-list-item-inner">
                        <div class="aui-list-item-media" style="width: 4rem;">
                            <!-- <img src="../../common/images/agent.png" class="aui-img-round aui-list-img-sm"> -->
                            <img :src="brokerInfoList.headPortrait?getImgUrl()+brokerInfoList.headPortrait:'../../common/images/noupload.png'"
                            class="aui-img-round aui-list-img-sm">
                        </div>
                        <div class="aui-list-item-inner">
                            <div class="aui-info">
                                <div class="aui-info-item">
                                    <h4 class="title" style="font-size:.8rem;">{{brokerInfoList.brokerName}}</h4><small
                                        class="blue-small-tag">经纪人</small>
                                </div>
                                <div class="aui-info-item" style="position:absolute;right:0;">
                                    <a  :href="'tel:'+brokerInfoList.phone">
                                        <img src="../../common/images/call.svg" style="width:1.5rem;height: 1.5rem;" >
                                    </a>
                                </div>
                            </div>
                            <div class="aui-info" style="padding-top:.3rem;">
                                <div class="aui-info-item color-3"><small>发布中房源：{{brokerInfoList.houseNum}}（近三个月发布{{brokerInfoList.quarterNum}}）</small></div>
                            </div>
                            <div class="aui-info" style="padding-top:.1rem;">
                                <div class="aui-info-item color-3">
                                    <small>近三个月推送楼书：{{brokerInfoList.buildingBookNum}}</small>&nbsp;&nbsp;&nbsp;&nbsp;<small>电话咨询：{{brokerPhoneNum}}</small></div>
                            </div>
                            <div class="aui-info" style="padding-top:.1rem;">
                                <div class="aui-info-item"><small>所属公司：{{brokerInfoList.companyName}}</small></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="aui-clearfix" style="width:86%;margin:.3rem auto .5rem;">
                    <a href="javascript:;" class="for-button aui-pull-left" @click="inforImg=1"><img src="../../common/images/agent-1.svg">从业信息卡</a>
                    <a href="javascript:;" class="for-button aui-pull-right"  @click="maskLayer=1"><img src="../../common/images/agent-2.svg">营业执照</a>
                </div>
            </div>
        </div>
        <div class="all-list aui-content aui-margin-t-10" style="position: relative;">
            <h3 class="common-title-h3 mt-1">推荐房源</h3>
            <div class="out" v-for="item in brokerRecommendHouse" @click="goDetails(item)">
                <div class="more-house-list">
                    <div class="pic">

                        <img :src="item.imgUrl?getImgUrl()+item.imgUrl:'../../common/images/noupload.png'">
                        <p class="position-des aui-ellipsis-1"><small>{{item.introduce}}</small></p>
                    </div>
                    <div class="remark aui-clearfix">
                        <div class="line-1 aui-ellipsis-1">{{item.houseTitle}}</div>
                        <div class="aui-info">
                            <div class="aui-info-item"><small>浏览量</small>{{countVisitsList[$index]}}</div>
                            <div class="aui-info-item"><big>{{item.price}}</big><small> 元/m²·天</small></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="all-list aui-content">
            <h3 class="common-title-h3 mt-1">全部房源({{totalNum}})</h3>
            <ul class="aui-clearfix second-select sort-button" id="all-select" style="margin-top:.2rem;">
                <li><a href="javascript:;" class="new" data-type="sort" data-time="0" @click="sortNew($event)">最新</a></li>
                <li><a href="javascript:;" class="arr1" data-type="sort" data-time="3" @click="sortByHot($event)">热度<div class="arr">
                            <div class="arrUp"></div>
                            <div class="arrDown"></div>
                        </div></a></li>
                <li><a href="javascript:;" class="arr1" data-type="sort" data-time="3" @click="sortByAera($event)">面积<div class="arr">
                            <div class="arrUp"></div>
                            <div class="arrDown"></div>
                        </div></a></li>
                <li><a href="javascript:;" class="arr1" data-type="sort" data-time="3" @click="sortByPrice($event)">单价<div class="arr">
                            <div class="arrUp"></div>
                            <div class="arrDown"></div>
                        </div></a></li>
            </ul>
            <ul class="aui-list aui-list-in" v-if="allHouseList.length > 0">
                <li class="aui-list-item" v-for="item in allHouseList" @click="goDetails(item)">
                    <div class="aui-list-item-media">
                        <!-- <img src="../../common/images/h-1.jpg"> -->
                        <img :src="item.imgUrl?getImgUrl()+item.imgUrl:'../../common/images/noupload.png'">
                    </div>
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-text">
                            <div class="aui-list-item-title aui-ellipsis-1">{{item.houseTitle}}</div>
                        </div>
                        <div class="aui-info" style="padding:.2rem 0 0;">
                            <div class="aui-info-item"><small>上架：{{forDate(item.publishTime)}}</small></div>
                            <div class="aui-info-item"><span class="blue">{{item.price}}</span>&nbsp;<small>元/m²·天</small></div>

                        </div>
                        <div class="aui-info">
                            <div class="aui-info-item"><small>{{item.town}}·{{item.tradingArea}}</small></div>
                            <div class="aui-info-item"><small>{{houseCollectionNum[$index].count}}人收藏</small></div>
                        </div>
                        <div class="aui-info" style="padding:.2rem 0 0;">
                            <div class="aui-info-item">
                                <a href="javascript:;" class="traffic"><small>{{item.subwayDistanceName}}</small></a>
                                <a href="javascript:;" class="traffic"><small>{{item.fitmentStatus==1?'毛坯':item.fitmentStatus==2?'标配简装':item.fitmentStatus==3?'遗留装修':'拎包入住'}}</small></a>
                            </div>
                            <div class="aui-info-item"><small>浏览量{{allHouseCountVisits[$index]}}</small></div>
                        </div>
                    </div>
                </li>
                <li class="loadMore">
                      <div class="aui-btn aui-btn-sm aui-btn-primary " v-if="more" @click="loadMore">查看更多</div>
                      <small v-else>已加载全部</small>
                </li>
            </ul>
            <div v-if="allHouseList.length == 0" style="padding: 10px 10px 20px;text-align: center; color: #9B9B9B;font-size: .6rem;">
                暂无数据
            </div>
        </div>
        <div class="dibu-qrcode">
            <div class="bottom-line">
                <h5>关注公众号，选址更方便</h5>
                <div class="bg-line"></div>
            </div>
            <img src="../../common/images/qrcode.svg">
        </div>
        <!-- 底部 -->
        <footer>
            <img src="../../common/images/union/footer.svg" style="width:100%;">
        </footer>
        <!-- 底部 -->
            <!--营业执照-->
        <div class="maskLayer" @click="maskLayer=0" v-if="maskLayer==1">
            <img
            id="maskLayer_img"
            :src="brokerInfoList.businessLicenseImg?brokerInfoList.businessLicenseImg:'../../common/images/noupload.png'"
            alt=""
            />
        </div>
        <div class="maskLayer" @click="inforImg=0" v-if="inforImg==1">
            <img
            id="maskLayer_img"
            :src="brokerInfoList.informationImg?getImgUrl()+brokerInfoList.informationImg:'../../common/images/noupload.png'"
            alt=""
            />
        </div>
    </div>
    <a class="back-to-top" href="javascript:;">
        <img src="../../common/images/totop.svg">
    </a>
    <script>
        $(document).ready(function () {
            //回到顶部
            window.onscroll = function () {
                var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
                if (scrollTop >= 100) {
                    $('.back-to-top').fadeIn();
                } else {
                    $('.back-to-top').fadeOut();
                }
            }
            $('.back-to-top').click(function () { $('html,body').animate({ scrollTop: '0px' }, 500); });
            $('.sort-button .new').on('click', function () {
                var times = parseInt($(this).attr('data-time'));
                if ($(this).attr('data-type') == 'sort') {
                    if (times == 0) {
                        $(this).css("color", "#00A0E9");
                        times++;
                        $(this).attr('data-time', 1);
                    } else if (times == 1) {
                        $(this).css("color", "#4a4a4a");
                        times = 0;
                        $(this).attr('data-time', 0);
                    }
                }
            });
            $('.sort-button .arr1').on('click', function () {
                var times = parseInt($(this).attr('data-time'));
                if ($(this).attr('data-type') == 'sort') {
                    if (times == 3) {
                        $(this).css("color", "#00A0E9");
                        $(this).parent().find('.arrUp').css("border-bottom-color", "#00A0E9");
                        $(this).parent().find(".arrDown").css("border-top-color", "#ccc");
                        $(this).attr('data-time', 0);
                    } else if (times == 0) {
                        $(this).css("color", "#00A0E9");
                        $(this).parent().find('.arrDown').css("border-top-color", "#00A0E9");
                        $(this).parent().find(".arrUp").css("border-bottom-color", "#ccc");
                        $(this).attr('data-time', 1);
                    } else {
                        $(this).css("color", "#4A4A4A");
                        $(this).parent().find(".arrUp").css("border-bottom-color", "#ccc");
                        $(this).parent().find(".arrDown").css("border-top-color", "#ccc");
                        $(this).attr('data-time', 3);
                    }
                }
            })
            $('.arrUp').click(function(e){
                e.stopPropagation();
            })
            $('.arrDown').click(function(e){
                e.stopPropagation();
            })
        })
        function showMenus(){
            $('.more-info ul').toggle();
        }
        $(document).click(function(e) { //点击空白处关闭弹窗
                var  pop = $('.more-info');  
                if(!pop.is(e.target) && pop.has(e.target).length === 0) { 
                    $('.more-info ul').hide();
            }
        })  
    </script>
</body>

</html>